<template>
  <a-drawer
      :title="title"
      :maskClosable="true"
      width=650
      placement="right"
      :closable="true"
      @close="close"
      :visible="visible"
      :destroyOnClose=true
      style="overflow: auto;padding-bottom: 53px;">

    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-form-model-item :labelCol="labelCol"
          :wrapperCol="wrapperCol" label="商品图片" prop="url">
          <!-- <aliossImageUpload v-model="url" /> -->
          <JImageUpload :uploadParams="getUploadParams()" :isMultiple="true" :number="1" @fileChange="fileChange" v-model="fileList" :fileSize='0.5'></JImageUpload>
          <div>注：不超过1张</div>
        </a-form-model-item>
        <!-- <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="productNo"
          required
          label="商品编号">
          <a-input placeholder="请输入商品编号" v-model="model.productNo"/>
        </a-form-model-item> -->

        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="productName"
          label="商品名称">
          <a-input placeholder="请输入商品名称" v-model="model.productName"/>
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="describe"
          label="商品描述">
          <a-textarea v-model="model.describe" :rows="4" />
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="status"
          label="状态">
          <!-- <a-input v-model="model.description"/> -->
          <a-radio-group v-model="model.status" name="radioGroup" @change="change">
            <a-radio :value="0">启用</a-radio>
            <a-radio :value="1">禁用</a-radio>
          </a-radio-group>
        </a-form-model-item>
          <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="divAdd"
          label="规格">
            <a-button @click="divAdd" type="primary" icon="plus">新增</a-button>
            <span style="margin-left:10px">例：纯黑美式、美式加奶...</span>
        </a-form-model-item>
        <div style="height: 330px;overflow: scroll;">
          <div v-for="(row, index) in model.coffeeProductItemList" :key="index" class="divList">
              <div>
                <a-form-model-item
                :labelCol="labelCol1"
                :wrapperCol="wrapperCol1"
                :prop="'coffeeProductItemList.' + index +'.name'"
                :rules="validatorRules.name"
                label="规格名称">
                <a-input v-model="row.name" />
              </a-form-model-item>
                <a-form-model-item
                :labelCol="labelCol1"
                :wrapperCol="wrapperCol1"
                :prop="'coffeeProductItemList.' + index +'.ticketId'"
                :rules="validatorRules.ticketId"
                label="券ID">
                <a-input v-model="row.ticketId" />
              </a-form-model-item>
              <a-form-model-item
                :labelCol="labelCol1"
                :wrapperCol="wrapperCol1"
                :prop="'coffeeProductItemList.' + index +'.integralLevel0'"
                :rules="validatorRules.integralLevel0"
                label="集团银卡价格">
                <a-input-Number v-model="row.integralLevel0" type="Number" :min="0" :precision="0"  style="width:230px"/>
              </a-form-model-item>
              <a-form-model-item
                :labelCol="labelCol1"
                :wrapperCol="wrapperCol1"
                :prop="'coffeeProductItemList.' + index +'.integralLevel1'"
                :rules="validatorRules.integralLevel1"
                label="集团金卡价格">
                 <a-input-Number v-model="row.integralLevel1" type="Number" :min="0" :precision="0"  style="width:230px"/>

              </a-form-model-item>
              <a-form-model-item
                :labelCol="labelCol1"
                :wrapperCol="wrapperCol1"
                :prop="'coffeeProductItemList.' + index +'.integralLevel2'"
                :rules="validatorRules.integralLevel2"
                label="集团白金卡价格">
                 <a-input-Number v-model="row.integralLevel2" type="Number" :min="0" :precision="0"  style="width:230px"/>

              </a-form-model-item>
              <a-form-model-item
                :labelCol="labelCol1"
                :wrapperCol="wrapperCol1"
                :prop="'coffeeProductItemList.' + index +'.integralLevel3'"
                :rules="validatorRules.integralLevel3"
                label="集团铂金卡价格">
                 <a-input-Number v-model="row.integralLevel3" type="Number" :min="0" :precision="0"  style="width:230px"/>

              </a-form-model-item>
              </div>
            <img  src="../../../../assets/operations/bairuidelete.png" class="bairuidelete" @click="deleteDivList(index)" v-show="index!=0"/>
          </div>
        </div>
        

      </a-form-model>
    </a-spin>
    <a-row :style="{ textAlign: 'right' }">
        <a-button :style="{ marginRight: '8px' }" @click="handleCancel">
          关闭
        </a-button>
        <a-button  @click="handleOk" type="primary">确定</a-button>
      </a-row>
  </a-drawer>
</template>

<script>
  import { addProduct, duplicateCheck } from '@/api/marketingCenter/operations'
  import JImageUpload from '@/components/qiniuUpload/JImageUpload.vue'
  import globalData from '@/assets/js/common'
  import aliossImageUpload from '@comp/aliossImageUpload'
  export default {
    name:'cc',
    components: {
      JImageUpload,
      aliossImageUpload
    },
    data() {
      const _this = this
        let integralLevel0 =  (rule, value, callback) => {
            let newArr=rule.field.split('.')
            let currentIndex=newArr[1];
            let currentProp=newArr[2];
            let currentPropBro='';
            if(currentProp==='integralLevel0'){
                currentPropBro=_this.model.coffeeProductItemList[currentIndex].integralLevel0;
            }
            if(value===''&&currentPropBro===''){
                callback(new Error('Please Enter StatedRate'))
            } else {
                callback()
            }
        };
        let integralLevel1 =  (rule, value, callback) => {
            let newArr=rule.field.split('.')
            let currentIndex=newArr[1];
            let currentProp=newArr[2];
            let currentPropBro='';
            if(currentProp==='integralLevel1'){
                currentPropBro=_this.model.coffeeProductItemList[currentIndex].integralLevel0;
            }
            if(value===''&&currentPropBro===''){
                callback(new Error('Please Enter StatedRate'))
            }else{
                callback()
            }
        };
        let integralLevel2 =  (rule, value, callback) => {
            let newArr=rule.field.split('.')
            let currentIndex=newArr[1];
            let currentProp=newArr[2];
            let currentPropBro='';
            if(currentProp==='integralLevel2'){
                currentPropBro=_this.model.coffeeProductItemList[currentIndex].integralLevel0;
            }
            if(value===''&&currentPropBro===''){
                callback(new Error('Please Enter StatedRate'))
            }else{
                callback()
            }
        };
        let integralLevel3 =  (rule, value, callback) => {
            let newArr=rule.field.split('.')
            let currentIndex=newArr[1];
            let currentProp=newArr[2];
            let currentPropBro='';
            if(currentProp==='integralLevel3'){
                currentPropBro=_this.model.coffeeProductItemList[currentIndex].integralLevel0;
            }
            if(value===''&&currentPropBro===''){
                callback(new Error('Please Enter StatedRate'))
            }else{
                callback()
            }
        };
        let ticketId =  (rule, value, callback) => {
          console.log("11111111111");
            if(value===''){
              console.log("券id是空");
                callback(new Error('Please Enter StatedRate'))
            }else{
                callback()
            }
        };
        let name =  (rule, value, callback) => {
            if(value===''){
              console.log("name是空");
                callback(new Error('Please Enter StatedRate'))
            }else{
                callback()
            }
        };
        
        let describe =  (rule, value, callback) => {
          if(value.length == ''){
            callback(new Error('请输入商品描述！'))
          }else if(value.length > 200){
                callback(new Error('请控制在200个字符内！'))
            }else{
                callback()
            }
        };
      return {
        singleFileList: [],
        fileList: [],
        value: 1,
        title: '操作',
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
         wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        labelCol1: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol1: {
          xs: { span: 24 },
          sm: { span: 10 }
        },
        confirmLoading: false,
        validatorRules: {
          url: [{ required: true, message: '请上传卡片图', trigger: ['blur', 'change'] }],
          // productNo: [{ required: true, message: '请输入商品编号!' }],
          productName: [{ required: true, message: '请输入商品名称!' }],
          describe: [{ validator:describe,required: true}],
          guige: [{ required: true, message: '请输入商品规格!' }],
          ticketId: [{ validator:ticketId, required: true, message: '请输入券ID!' }],
          name: [{ validator:name, required: true, message: '请输入规格名称!' }],
          integralLevel0: [{ validator:integralLevel0, required: true, message: '请输入集团银卡价格!' }],
          integralLevel1: [{ validator:integralLevel1,required: true, message: '请输入集团金卡价格!' }],
          integralLevel2: [{ validator:integralLevel2,required: true, message: '请输入集团白金卡价格!' }],
          integralLevel3: [{ validator:integralLevel3,required: true, message: '请输入集团铂金卡价格!' }],
          status: [{ required: true, message: '请选择状态!' }],
          dictCode: [
            { required: true, message: '请输入字典编码!' },
            { validator: this.validateDictCode }]
          },
      }
    },
    created() {
    },
    methods: {
      //添加盒子
      divAdd(){
          this.model.coffeeProductItemList.push({
            name:"",
            ticketId:"",
            integralLevel0:"",
            integralLevel1:"",
            integralLevel2:"",
            integralLevel3:"",
          })
      },
      // 删除盒子
      deleteDivList(e){
        this.model.coffeeProductItemList.splice(e,1)
      },
      // 上传图片
      fileChange(list) {
        this.model.url = list.length > 0 ? list[0].url : undefined
      },
      // 上传图片
      getUploadParams() {
        return { ...globalData.uploadParams }
      },
      validateDictCode(rule, value, callback) {
        // 重复校验
        var params = {
          tableName: 'sys_dict',
          fieldName: 'dict_code',
          fieldVal: value,
          dataId: this.model.id
        }
        duplicateCheck(params).then((res) => {
          if (res.success) {
            callback()
          } else {
            callback(res.message)
          }
        })
      },
      handleChange(value) {
        this.model.status = value
      },
      add() {
        this.edit({
          coffeeProductItemList:[{
            name:"",
            integralLevel0:"",
            integralLevel1:"",
            integralLevel2:"",
            integralLevel3:"",
          }],
        })
        this.fileList=[]
      },
      change(e){
        console.log(e.target.value);
      },
      edit(record) {
        if (record.id) {
          this.visiblekey = true
        } else {
          this.visiblekey = false
        }
        this.fileList = record.url
        this.model = Object.assign({productName:""}, record)
        this.model.productName=record.name
        this.visible = true
      },
      // 确定
      handleOk() {
        const that = this
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true
            let obj
            console.log(this.model);
            var addObject={
              // productNo:this.model.productNo,
              name:this.model.productName,
              coffeeProductItemList:this.model.coffeeProductItemList,
              describe:this.model.describe,
              status:this.model.status,
              url:this.model.url
            }
            if (this.model.id) {
              addObject.id=this.model.id
            }
            obj = addProduct(addObject)
            obj.then((res) => {
              if (res.success) {
                that.$message.success(res.msg)
                that.$emit('ok')
              } else {
                that.$message.warning(res.msg)
              }
            }).finally(() => {
              that.confirmLoading = false
              that.close()
            })
          } else {
            return false;
          }
        })
      },
      // 关闭
      handleCancel() {
        this.close()
      },
      close() {
        this.$emit('close')
        this.fileList = []
        this.visible = false
        this.$refs.form.resetFields();
      },
    }
  }
</script>
<style scoped>
.divList{
  border-bottom: 1px solid #ccc;
  padding-left: 34px;
  margin-bottom: 30px;
  position: relative;
}
.bairuidelete{
  position:absolute;
  top: 135px;
  right: 80px;
  width: 20px;
  height: 20px;
}

</style>